<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">

		<link rel="stylesheet" href="../../dist/mescroll.min.css">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				-webkit-touch-callout:none;
				-webkit-user-select:none;
				-webkit-tap-highlight-color:transparent;
			}
			body{background-color: white}
			ul{list-style-type: none}
			a {text-decoration: none;color: #18B4FE;}
			
			/*模拟的标题*/
			.header{
				z-index: 9990;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 44px;
				line-height: 44px;
				text-align: center;
				border-bottom: 1px solid #eee;
				background-color: white;
			}
			.header .btn-left{
				position: absolute;
				top: 0;
				left: 0;
				padding:12px;
				line-height: 22px;
			}
			
			/*列表*/
			.mescroll{
				position: fixed;
				top: 44px;
				bottom: 0;
				height: auto;
			}
			
			/* 无更多消息 */
			.msg-end{
				display: none;
				padding: 20px 0;
				font-size: 12px;
				text-align: center;
				color: #FF8095;
			}
			/*消息列表*/
			.msg{
				margin: 15px;
			}
			.msg.right{
				text-align: right;
			}
			.msg.left{
				text-align: left;
			}
			.msg .msg-warp{
				width: 50%;
				display: inline-block;
				padding: 16px;
				border-radius: 20px;
				background-color: #FF8095;
				color: #fff;
			}
			.msg .msg-warp .msg-title{
				margin-left: -6px;
				font-size: 16px;
				text-align: left;
			}
			.msg .msg-warp .msg-content{
				font-size: 14px;
				margin-top: 5px;
				text-align: left;
			}
		</style>
	</head>

	<body>
		<!--标题-->
		<p class="header"><a class="btn-left" href="../index.html">main</a> 聊天记录list-msg</p>
		<!--滑动区域-->
		<div id="mescroll" class="mescroll">
			<!-- 无更多消息 -->
			<div id="msgEnd" class="msg-end">没有更多消息了</div>
			
			<!-- 消息列表 (必须加上padding-bottom)-->
			<div id="msgList" style="padding-bottom: 60%;">
				<!-- <div class="msg">
					<div class="msg-warp">
						<div class="msg-title">{{msg.title}}</div>
						<div class="msg-content">{{msg.content}}</div>
					</div>
				</div> -->
			</div>
		</div>
	</body>
	
	<script src="../../dist/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
	<!--mescroll本身不依赖jq,这里为了模拟发送ajax请求-->
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		$(function(){
			var pageNum = 1; // 页码
			var pageSize = 10; // 页长
			
			//创建MeScroll对象
			var mescroll = new MeScroll("mescroll", {
				down: {
					autoShowLoading: true, // 显示下拉刷新的进度条
					minAngle: 70, // 增大触发下拉刷新的角度
					callback: downCallback //下拉刷新的回调
				},
				up: {
					use: false, // 禁止上拉
					toTop: {
						src: '' // 不显示回到顶部按钮
					}
				}
			});
			
			/*下拉刷新的回调 */
			function downCallback(){
				//联网加载数据
				getListDataFromNet(pageNum, pageSize, function(data){
					// 需自行维护页码
					pageNum ++;
					// 先隐藏下拉刷新的状态
					mescroll.endSuccess();
					// 不满一页,说明已经无更多消息 (建议根据您实际接口返回的总页码数,总消息量,是否有消息的字段来判断)
					if(data.length < pageSize){
						document.getElementById("msgEnd").style.display = "block"; // 显示已无更多消息
						mescroll.lockDownScroll(true); // 锁定下拉
					}
					//设置列表数据
					setListData(data);
				}, function(){
					pageNum --; // 联网失败,必须回减页码
	                mescroll.endErr(); // 隐藏下拉刷新的状态
				});
			}
			
			/*设置列表数据*/
			function setListData(curPageData) {
				var listDom=document.getElementById("msgList");
				var str = '';
				for (var i = 0; i < curPageData.length; i++) {
					var msg=curPageData[i];
					str+='<div class="msg '+ (msg.id%2==0 ? 'right' : 'left') +'">';
					str+='<div class="msg-warp">';
					str+='<div class="msg-title">'+msg.title+'</div>';
					str+='<div class="msg-content">'+msg.content+'</div>';
					str+='</div>';
					str+='</div>';
				}
				var lisDom=document.createElement("div");
				lisDom.innerHTML=str;
				var topMsg = listDom.getElementsByClassName("msg")[0]; // 获取当前顶部的消息 (必须写在insertBefore之前)
				listDom.insertBefore(lisDom, listDom.firstChild);// 加在列表的前面
				
				if(pageNum <= 2){
					// 第一页直接滚动到底部 ( pageNum已在前面加1 )
					mescroll.scrollTo(99999, 0)
				}else if(topMsg){
					// 保持顶部消息的位置
					mescroll.scrollTo(topMsg.offsetTop - 100, 0) // 减去上偏移量100
				}
			}
			
			/*联网加载列表数据
			 在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
			 请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
			 实际项目以您服务器接口返回的数据为准,无需本地处理分页.
			 * */
			function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
				//延时一秒,模拟联网
                setTimeout(function () {
                	try{
                		var msgArr=[];
	                	for (var i = 0; i < pageSize; i++) {
	                		var msgId = (pageNum - 1) * pageSize + i + 1;
	                		var msg = {
	                			id: msgId,
	                			title: "【消息" + msgId + "】",
	                			content: "内容: 下拉获取聊天记录"
	                		};
	                		// 此处模拟只有5页的消息 (第5页只有3条)
	                		if(pageNum>=5 && i>=3){}else{
	                			msgArr.unshift(msg);
	                		}
	                	}
	                	//联网成功的回调
	                	successCallback&&successCallback(msgArr);
                	}catch(e){
                		//联网失败的回调
                		errorCallback&&errorCallback();
                	}
                },1000)
			}
			
		});
	</script>

</html>